
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../../style/layui-v2.5.6/layui/css/layui.css">
</head>
<style>
    *{
        margin:0px;
        padding:0px;
    }
    h1{
        text-align:center;
        font-weight:bold;
        margin-bottom:20px;
        font-size:30px;
        margin-top: 8px;
        color: lightsalmon;
    }
    .big_div{
        margin:0px auto;
        width:500px;
    }
    .kuang_input{
        width:250px;
        height:30px;
        border: 2px solid #45b97c;
        border-radius: 8px;
        font-size: 18px;
    }
    .shij_p{
        font-size: 18px;
        font-weight: bold;
        display:inline-block;
    }
</style>
<body style="background: #FBFBFB">
    <h1>用户详细信息操作页面</h1>
    <div class="big_div">
        <form id="addCustomerInf-form" class="layui-form" lay-filter="addCustomerInf-form"
              method="post">
            <input type="hidden" name="customerLogin.customerId" value="${customerLogin.customerId}">
            <div class="layui-form-item">
                <label class="layui-form-label">当前帐号：</label>
                <div class="layui-input-block">
                    <input type="text" name="customerLogin.loginName" required lay-verify="required" autocomplete="off"
                           class="layui-input" value="${customerLogin.loginName}" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">真实姓名：</label>
                <div class="layui-input-block">
                    <input type="text" name="customer_name" required lay-verify="required" placeholder="请输入姓名"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">证件类型：</label>
                <div class="layui-input-block">
                    <select name="identity_card_type" lay-verify="required">
                        <option value="1">身份证</option>
                        <option value="2">军官证</option>
                        <option value="3">护照</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">证件号码：</label>
                <div class="layui-input-block">
                    <input type="text" name="identity_card_no" required lay-verify="required" placeholder="请输入证件号码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号：</label>
                <div class="layui-input-block">
                    <input type="text" name="mobile_phone" required lay-verify="required" placeholder="请输入手机号"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱：</label>
                <div class="layui-input-block">
                    <input type="email" name="customer_email" required lay-verify="required" placeholder="请输入邮箱"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别：</label>
                <div class="layui-input-block">
                    <input type="radio" name="gender" value="1" title="男">
                    <input type="radio" name="gender" value="0" title="女">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">会员生日：</label>
                <div class="layui-input-block">
                    <input type="date" name="birthday" required lay-verify="required" placeholder="请输入生日"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户积分：</label>
                <div class="layui-input-block">
                    <input type="number" name="user_point" required lay-verify="required" placeholder="请输入积分"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">余额：</label>
                <div class="layui-input-block">
                    <input type="number" step="0.01" name="user_money" required lay-verify="required" placeholder="请输入余额"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="addFormDemo">保存</button>
        </form>
    </div>

    <div style="font-size: 10px">
        <table id="CustomerInf-tab" lay-filter="test"></table>
    </div>

    <script id="tab-toolbar" type="text/html">
            <p class="shij_p">修改时间：</p>
            <input type="date" class="kuang_input" id="startTime">~
            <input type="date" class="kuang_input" id="endTime">
            <button class="layui-btn layui-btn-normal" lay-event="search">搜索</button>
            <button class="layui-btn layui-btn-danger" lay-event="delete">删除</button>
            <button class="layui-btn layui-btn-warm" lay-event="update">修改</button>
            <button class="layui-btn" lay-event="add">添加</button>
    </script>



    <script src="../../style/layui-v2.5.6/layui/layui.js"></script>
    <script type="text/javascript" src ="../../style/js/jquery-3.3.1.js"></script>
    <script>
        $("#addCustomerInf-form").hide();
        // 加载layui模块
        layui.use(['form', 'layer', 'table'], function () {
            var form = layui.form;
            var layer = layui.layer;//弹出层
            var table = layui.table;//表格

            // 用户帐号密码查询展示
            table.render({
                elem: '#CustomerInf-tab'
                , height: 530
                , url: '../../CustomerInf/selCustomerInf.do' //数据接口
                , toolbar: "#tab-toolbar"
                ,skin:'line'//边框风格
                , page: true //开启分页
                , cols: [[ //表头
                    {checkbox: true},
                    {field: 'customer_inf_id', title: 'ID', width: 50, sort: true}
                    ,{field: 'customerLogin', title: '账号', width: 70, sort: true,
                        templet:'<div>{{d.customerLogin.loginName}}</div>'}
                    ,{field: 'customer_name', title: '姓名', width:100,sort: true }
                    ,{field: 'identity_card_type', title: '证件类型', width:100,sort: true,templet:function(d){
                            //证件类型
                            if(d.identity_card_type==1)
                                return "身份证";
                            if(d.identity_card_type==2)
                                return "军官证";
                            if(d.identity_card_type==3)
                                return "护照";
                            }}
                    ,{field: 'identity_card_no', title: '证件号码', width:100,sort: true}
                    ,{field: 'mobile_phone', title: '手机号', width:100,sort: true}
                    ,{field: 'customer_email', title: '邮箱', width:100,sort: true}
                    ,{field: 'gender', title: '性别', width:70,sort: true,templet:function(d){
                                //性别
                                if(d.gender==0)
                                    return "女";
                                return "男";
                            }}
                    ,{field: 'user_point', title: '用户积分', width:100,sort: true}
                    ,{field: 'register_time', title: '注册时间', width:100,sort: true}
                    ,{field: 'birthday', title: '会员生日', width:100,sort: true}
                    ,{field: 'level_name', title: '会员级别', width:100,sort: true,templet:function(d){
                        //会员级别
                        if(d.customerLevelInf.customer_level==1)
                            return "青铜会员";
                        if(d.customerLevelInf.customer_level==2)
                            return "白银会员";
                        if(d.customerLevelInf.customer_level==3)
                            return "黄金会员";
                        if(d.customerLevelInf.customer_level==4)
                            return "白金会员";
                        if(d.customerLevelInf.customer_level==5)
                            return "钻石会员";
                    }}
                    ,{field: 'user_money', title: '用户余额', width:100,sort: true}
                    ,{field: 'modified_time', title: '最后修改时间', width:120,sort: true}
                ]]
            });

            // 监听表头工具栏
            //监听事件 test是表格的lay-filter值
            table.on('toolbar(test)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'delete':
                        // 获取选中的行对象
                        var data = table.checkStatus("CustomerInf-tab").data;
                        // 把多个id拼接
                        var ids = "";
                        for (var i = 0; i < data.length; i++) {
                            ids += data[i].customer_inf_id + ",";
                        }
                        // 调用ajax到后台执行删除
                        $.ajax({
                            type: "post",
                            url: "../../CustomerInf/delCustomerInf.do",
                            data: {"ids": ids},
                            dataType: "json",
                            success: function (data) {
                                layer.msg(data.msg);
                                table.reload("CustomerInf-tab");
                            }
                        });
                        break;

                    case 'update':
                        break;
                    case 'search':
                        break;
                    case 'add':
                       index = layer.open({
                            type: "1",
                            title: "添加窗口",
                            area: ['400px', '500px'],
                            content: $("#addCustomerInf-form"),
                           //刷新弹出层数据
                           end: function () {
                               location.reload();
                           },
                        });
                        break;
                }
            });

            // 添加当前用户的详细信息
            form.on('submit(addFormDemo)', function (data) {
                // layui获取表单的所有元素的值
                var data1 = form.val("addCustomerInf-form");
                // 使用ajax提交表单
                $.ajax({
                    type: "post",
                    url: "../../CustomerInf/addCustomerInf.do",
                    data: data1,
                    dataType: "json",
                    success: function (data) {
                        layer.msg(data.msg);
                        //关闭弹出层
                        layer.close(index);
                        //重载表格
                        table.reload("CustomerInf-tab");

                    }
                });
                return false;
            });

        });
    </script>
</body>
</html>
